$(function () {
  // 获取文章类别，调用模板引擎进行渲染
  function init() {
    $.ajax({
      url: bignews.category_list,
      success(res) {
        let htmlStr = template('cateTemp', res);
        $('tbody').html(htmlStr);
      }
    });
  }
  init();

  // 封装通用的 编辑 / 修改分类函数  将 url 和 data 作为参数传进去
  function operation(url, data) {
    // 发送请求
    $.ajax({
      type: 'post',
      url,
      data,
      success(res) {
        console.log(res);
        // 一旦发布成功
        // if (res.code == 200) {
        //   // alert('添加成功');
        //   $('#mymodal').modal('hide');
        // }
        // 1.关闭模态框
        $('#myModal').modal('hide');
        // 2.清空表单
        // 重置表单
        $('#myForm')[0].reset();
        init();
      }
    });
  }

  // 监听表单新增按钮的点击事件，可能时新增，也可能是编辑
  $('#btn-opt').on('click', function () {
    const name = $('#cateName').val();
    const slug = $('#cateSlug').val();

    if ($(this).text() == '新增') {
      operation(bignews.category_add, { name, slug });
    } else {
      operation(bignews.category_edit, {
        name,
        slug,
        id: $('#cateId').val()
      });
    }
  });

  // 处理删除按钮
  $('tbody').on('click', '#btn-del', function () {
    let id = $(this).data('id');
    // let id = $(this).data().id;
    console.log(id);
    $.ajax({
      type: 'post',
      url: bignews.category_delete,
      data: { id },
      // dataType: 'json',
      success(res) {
        console.log(res);
        // 如果删除成功 init 重新加载数据
        if (res.code == 204) {
          alert(res.msg);
          init();
        }
      }
    });
  });

  // 修改分类按钮
  $('tbody').on('click', '#btn-edit', function () {
    // console.log('触发');
    // 点击编辑按钮
    // 应该弹出模态框
    // 由于跟新增共用一个模态框
    // 弹出之前修改文字
    $('#myModalLabel').text('编辑分类');
    $('#btn-opt').text('编辑');
    // 编辑按钮，已经预先储存了 当前分类的名称和别名
    // 拿出来赋值给输入框
    $('#cateName').val($(this).data('name'));
    $('#cateSlug').val($(this).data('slug'));
    // $('#btn-edit').val($(this).data('id'));
    $('#cateId').val($(this).data('id'));
    $('#myModal').modal('show');
  });

  // 点击编辑的时候，改变模态框的内容，每次点击新增的时候，应该时最原始状态
  // 每当模态框小时的时候，恢复成原始状态
  $('#myModal').on('hidden.bs.modal', function () {
    // 1.回复标题
    $('#myModalLabel').text('新增');
    // 2.回复按钮
    $('#btn-opt').text('新增');
    // 3.清空整个表单
    $('#myForm')[0].reset();
  });
})